<script lang="ts" setup>
    // 引入route
    import { useRoute } from 'vue-router';
    // 引入接口
    import {treeList,roleTreeList,allocMenuRole} from '../../../api/index'
    // 引入
    import { onMounted,reactive,ref } from 'vue';
    // 引入element plus的 ref树
    import {ElTree ,ElMessageBox} from 'element-plus'

    // 接收传输的参数
    const route:any = useRoute()
    const roleId = route.params.roleId;
    // 定义 ts any语法
    const pageData:any = reactive({
        tree: [],
        roleTree: [],
        expandedKey: []
    })

    // 获取 菜单列表的接口
    const getList = ():void => {
        treeList().then((
            res:{
                data: {
                    data: any
                }
            }
            // res: any 
        ) => {
            pageData.tree = res.data.data;
            pageData.tree.forEach((
                item: {
                    id: number
                }
            ) => {
                pageData.expandedKey.push(item.id)
            })
        })
    }
    // 获取当前用户拥有的菜单列表
    const getRoleList = ():void => {
        roleTreeList(roleId).then((res:any) => {
            res.data.data.forEach((
                item:{
                    id: number
                }
            ) => {
                pageData.roleTree.push(item.id)
            })            
        })
    }

    onMounted(():void => {
        getList();
        getRoleList();
    })
    // 一定要写在函数外面
    // 获取当前页面的tree树组件对象  变量名必须要和 el-tree绑定的ref值一致
    const tree = ref<InstanceType<typeof ElTree>>()
    const clearBoth = () => {
        // 让选中的值在页面上消失
        tree.value!.setCheckedKeys([], false)   
        // 手动清空 数据
        pageData.roleTree = []
        
    }

    // 保存菜单方法
    const saveMenu = () => {
        ElMessageBox.confirm('是否要确认', '提示', {
            showCancelButton: true,
            showConfirmButton: true,
            cancelButtonText: '关闭',
            confirmButtonText: "确定",
            callback: function (res) {
                if (res == 'confirm') {
                    let formData = new FormData();
                    formData.append('roleId',roleId)
                    formData.append('menuIds',String(pageData.roleTree))
                    allocMenuRole(formData);
                }
            }
        })
    }

    // 树复选框变化时 触发事件
    const treeChange = (e) => {
        // 判断数组选中的数组中有没有 当前选择的id
        let index = pageData.roleTree.findIndex(item => {
            return item == e.id
        })
        if(index != -1){
            pageData.roleTree.splice(index,1)
            if(e.parentId == 0){
                e.children.forEach(item => {
                    let index = pageData.roleTree.findIndex(items => {
                        return items == item.id
                    })
                    pageData.roleTree.splice(index,1)
                })
            }
            
        }else{
            pageData.roleTree.push(e.id);
            // 判断当前的菜单id是不是 父菜单
            if(e.parentId == 0){
                let arr:number[] = [];
                e.children.forEach(item => {
                    arr.push(item.id)
                })
                pageData.roleTree = pageData.roleTree.concat(arr);
            }
        }
        // 去重 并且重新转换成 数组
        pageData.roleTree = [...new Set(pageData.roleTree)];
    }
</script>

<template>
    <div class="tree">
        <el-card>
            <el-tree 
                :data="pageData.tree"
                :props="{
                    label:'title'
                }"
                ref="tree"
                :default-expanded-keys="pageData.expandedKey"
                show-checkbox
                node-key="id"
                :default-checked-keys="pageData.roleTree"
                @check="treeChange"
            />

            <el-row justify="center" class="btn">
                <el-button type="primary" @click="saveMenu">
                    保存
                </el-button>
                <el-button @click="clearBoth">
                    清空
                </el-button>
            </el-row>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
    .tree{
        padding: 30px;
    }
    .btn{
        margin-top: 30px;
    }
</style>